<template>
  <div class="qup-full-page">

    <template v-if="showDetailPage">
      <Details ref="refDetail" :visible.sync="showDetailPage" :detail-data="activeRowData" @goBack="goHome" />
    </template>
    <div v-if="showMarket">
      <market-apply
        ref="refDetail"
        :page-show.sync="showMarket"
        :detail-data="activeRowData"
        :type-flag="typeFlag"
        @goBack="goHome"
      />
    </div>
    <!-- <div> -->
    <stop-mangement v-if="showStopDlg" ref="tipDlg" :visible.sync="showStopDlg" :detail-data="activeRowData" @success="refreshTable" />
    <!-- </div> -->
    <div v-if="showNew">
      <NewMange
        ref="refDetail"
        :page-show.sync="showNew"
        :detail-data="activeRowData"
        :type-flag="typeFlag"
        @goBack="goHome"
      />
    </div>
    <div v-if="showEdit">
      <Edit
        ref="refDetail"
        :page-show.sync="showEdit"
        :detail-data="activeRowData"
        :type-flag="typeFlag"
        @goBack="goHome"
      />
    </div>
    <div v-show="!showDetailPage && !showEdit && !showNew && !showMarket">
      <!-- 顶部搜索 -->
      <div style="margin-bottom:10px">
        <search-form
          :search-config="searchConfig"
          :label-width="160"
          @visible-change="resetTableHeight"
          @search="handleSearch"
        />
      </div>
      <!-- 分页列表 -->
      <table-box
        ref="refPositionTable"
        :table-config="tableConfig"
        :dragable="true"
        :other-filters="otherFilter"
        :selected-arry.sync="tableSelected"
        click-row-selection
        @selection-change="handleSelectionChange"
        @btnOperate="btnOperate"
      >
        <el-table-column
          slot="before"
          fixed="left"
          type="selection"
          header-row-class-name="table-list-header"
        />
      </table-box>
    </div>
    <export-files v-if="showConsPerExport" title="导出建设周期" :config="exportConsConfig" :visible.sync="showConsPerExport" />

    <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
  </div>
</template>
<script>
import NewMange from './NewMange' // 新增showNew
import Edit from './Edit' // 编辑showNew
import Details from './Details' // 详情
import MarketApply from '../MarketApply/index.vue'
import StopMangement from './StopMangement.vue'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  components: { NewMange, Details, Edit, MarketApply, StopMangement },
  data() {
    return {
      exportVisible: false,
      showConsPerExport: false,
      typeFlag: '',
      decorationRangeList: [],
      activeRowData: '',
      searchConfig: [
        {
          label: '门店',
          prop: 'shopCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/shop/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: [],
            filtersRaw: []
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true,
            filtersRaw: []
          }
        },
        {
          label: '客户',
          prop: 'clientCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            apiHeader: {
              'permission-code': 'storemanagement',
              'Permission-App': 'slm'
            },
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/customer/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '客户',
            interfacePath: '/select-service/api/v1/customer/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '办事处',
          prop: 'officeCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        {
          label: '报图类型',
          prop: 'marketType',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/MARKET_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '门店建设类型',
          prop: 'constType',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/CONST_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '商家类别',
          prop: 'bizmanType',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BIZMAN_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: '', placeholder: '' },
        {
          label: '装修范围',
          prop: 'decorationRange',
          type: 'select',
          config: {
            multiple: true,
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/DECORATION_RANGE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '装修形式',
          prop: 'decorationForm',
          type: 'select',
          config: {
            multiple: true,
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/DECORATION_FORM?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '门店建设整体进度',
          prop: 'constSchedule',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BEFORE_CONST_SCHEDULE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '门店建设状态',
          prop: 'constState',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/CONST_STATE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '门店建设所属阶段',
          prop: 'belongStage',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BELONG_STAGE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '门店建设是否完结',
          prop: 'isEnd',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '是否已开业',
          prop: 'isOpen',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '是否测绘',
          prop: 'surveyIsFinishMapping',
          type: 'select',
          config: {
            selectData: [
              { label: '未完成', value: '0' },
              { label: '已完成', value: '1' }
            ]
          }
        },
        { label: '终止时间', prop: 'endTime', type: 'date', value: '' },
        {
          label: '数据来源',
          prop: 'dataSource',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/SHOP_CONSTRUCT_SOURCE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '创建时间', prop: 'createTime', type: 'date', value: '' }
      ],
      tableSelected: [], // 初始化选择表格数据
      selectList: [], // 初始化选中
      otherFilter: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopConstruct/page`,
        // interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configExceptionHandle/page`,
        hideSearchBar: true,
        apiHeader: {
          'Permission-Percode': 'storemanagement',
          'Permission-App': 'slm'
        },
        // pageSize: 20,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: 150,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'constSchedule',
            label: '门店建设整体进度',
            minWidth: 150,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BEFORE_CONST_SCHEDULE'
            }
          },
          {
            prop: 'belongStage',
            label: '所属阶段',
            minWidth: 150,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BELONG_STAGE'
            }
          },
          {
            prop: 'constState',
            label: '门店建设状态',
            minWidth: 150,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CONST_STATE'
            }
          },
          {
            prop: 'officeName',
            label: '办事处',
            minWidth: 130
          },
          {
            prop: 'clientName',
            label: '客户',
            minWidth: 170
          },
          {
            prop: 'shopName',
            label: '门店',
            minWidth: 170
          },
          {
            prop: 'businessStatus',
            label: '门店营业状态',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_BIZ_STATE'
            }
          },
          {
            prop: 'marketType',
            label: '报图类型',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'MARKET_TYPE'
            }
          },
          {
            prop: 'constType',
            label: '门店建设类型',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CONST_TYPE'
            }
          },
          {
            prop: 'bizmanType',
            label: '商家类别',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BIZMAN_TYPE'
            }
          },
          {
            prop: 'decorationRange',
            label: '装修范围',
            minWidth: 170,
            render: (creat, row) => {
              if (!row.decorationRange) {
                return
              }
              let list = []
              if (typeof (row.decorationRange) === 'string') {
                list = row.decorationRange.split(',')
              } else {
                list = row.decorationRange
              }
              const arr = []
              this.decorationRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
            // propEnum: {
            //   domainCode: 'marketing',
            //   appCode: 'slm',
            //   dictTypeCode: 'DECORATION_RANGE'
            // }
          },
          {
            prop: 'isHandover',
            label: '是否交接市场',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'surveyIsFinishMapping',
            label: '测绘情况',
            minWidth: 170,
            render: (creat, row) => {
              if (row.surveyIsFinishMapping === 0 || row.surveyIsFinishMapping === '0') {
                return (<span>未测绘</span>)
              }
              return (<span>已测绘</span>)
            }
          },
          {
            prop: 'surveyState',
            label: '测绘进度',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_SURVEY_STATE'
            }
          },
          {
            prop: 'designState',
            label: '设计进度',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_DESIGN_STATE'
            }
          },
          {
            prop: 'haveDecorationTask',
            label: '装修是否完成',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'isOpen',
            label: '是否开业',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'isEnd',
            label: '门店建设是否完结',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'endTime',
            label: '终止时间',
            minWidth: 170
          },
          {
            prop: 'dataSource',
            label: '数据来源',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_CONSTRUCT_SOURCE'
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 170
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增门店建设',
          optCode: 'add',
          outerFlag: true
        },
        {
          buttonName: '编辑',
          optCode: 'edit',
          outerFlag: true
        },
        {
          buttonName: '终止',
          optCode: 'termination',
          outerFlag: true
        },
        {
          buttonName: '建设终止',
          optCode: 'stop',
          outerFlag: true
        },
        {
          buttonName: '数据交接',
          optCode: 'dataTransition',
          outerFlag: true
        },
        {
          buttonName: '市场交接',
          optCode: 'shopTransition',
          outerFlag: true
        },
        {
          buttonName: '导出',
          optCode: 'export',
          outerFlag: true
        },
        {
          buttonName: '导出建设周期',
          optCode: 'exportConsPer',
          outerFlag: true
        }]
      },
      showDetailPage: false,
      showEdit: false,
      showNew: false,
      showMarket: false,
      showStopDlg: false
    }
  },
  computed: {
    exportConsConfig() {
      return [{
        code: 'export',
        name: '门店建设周期',
        dataMethod: 'post',
        dataApi: `/slm-admin/api/v1/shopConstruct/exportAll`,
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilter,
        queryField: 'constCode',
        headers: {
          'Permission-Percode': 'storemanagement',
          'Permission-App': 'slm'
        }
      }]
    },
    exportConfig() {
      return [{
        code: 'export',
        name: '门店建设整体跟进',
        dataMethod: 'post',
        dataApi: `/slm-admin/api/v1/shopConstruct/export?type=0`,
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilter,
        queryField: 'id',
        headers: {
          'Permission-Percode': 'storemanagement',
          'Permission-App': 'slm'
        }
      },
      {
        code: 'exportTemplate',
        name: '门店建设整体跟进模板',
        async: false,
        templateMethod: 'post',
        templateApi: `/slm-admin/api/v1/shopConstruct/export?type=1`,
        headers: {
          'Permission-Percode': 'storemanagement',
          'Permission-App': 'slm'
        }
      }]
    }
  },
  async created() {
    await this.getDictByPatchTypeAll(['DECORATION_RANGE']).then(res => {
      this.decorationRangeList = res.DECORATION_RANGE
    })
  },
  methods: {
    resetTableHeight() {
      this.$refs.refPositionTable.refreshTableHeight()
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    handleSelectionChange(val) {
      this.tableSelected = val
    },
    handleSearch(data) {
      this.otherFilter = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refPositionTable.initTableData('')
      })
    },
    btnOperate(code) {
      // 表格组件操作响应
      switch (code) {
        case 'add':
          this.handleNew()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          if (this.tableSelected.length > 1) {
            this.$message.warning('该操作仅支持单选')
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'shopTransition':
          if (!this.singleJudge(this.tableSelected, '市场交接', true)) {
            return
          }
          if (this.tableSelected.length > 1) {
            this.$message.warning('该操作仅支持单选')
            return
          }
          this.handleMarketHandover(this.tableSelected[0], 1)
          break
        case 'dataTransition':
          if (!this.singleJudge(this.tableSelected, '数据交接', true)) {
            return
          }
          if (this.tableSelected.length > 1) {
            this.$message.warning('该操作仅支持单选')
            return
          }
          this.handleMarketHandover(this.tableSelected[0], 2)
          break

        case 'termination': // 删除
          if (!this.singleJudge(this.tableSelected, '终止', true)) {
            return
          }
          if (this.tableSelected.length > 1) {
            this.$message.warning('该操作仅支持单选')
            return
          }
          if (this.tableSelected[0].isEnd) {
            this.$message.warning('该条数据门店建设已完结')
            return
          }
          if (this.tableSelected[0].isEndReport) {
            this.$message.warning('该条数据已提报终止申请，不可重复操作')
            return
          }
          this.handleStop(this.tableSelected[0], 'termination')
          break
        case 'stop': // 建设终止
          if (!this.singleJudge(this.tableSelected, '建设终止', true)) {
            return
          }
          if (this.tableSelected.length > 1) {
            this.$message.warning('该操作仅支持单选')
            return
          }
          if (this.tableSelected[0].isEnd) {
            this.$message.warning('该条数据门店建设已完结')
            return
          }
          if (this.tableSelected[0].isEndReport) {
            this.$message.warning('该条数据已提报终止申请，不可重复操作')
            return
          }
          this.handleStop(this.tableSelected[0], 'stop')
          break
        case 'export': // 删除
          this.exportVisible = true
          break
        case 'exportConsPer':
          this.showConsPerExport = true
          break
        default:
          break
      }
    },
    // 查看详情
    handleDetail(data) {
      this.showDetailPage = true
      this.showEdit = false
      this.NewMange = false
      this.showMarket = false
      this.activeRowData = data
    },
    // 新增handleNew
    handleNew() {
      this.typeFlag = 'add'
      this.showNew = true
      this.showEdit = false
      this.showDetailPage = false
      this.showMarket = false
      this.activeRowData = ''
    },
    // 编辑
    handleEdit(data) {
      // if (data.isEnd) {
      //   this.$message.warning('该条数据门店建设已完结，不可编辑')
      //   return
      // }
      this.typeFlag = 'edit'
      this.showNew = false
      this.showEdit = true
      this.showDetailPage = false
      this.showMarket = false
      this.activeRowData = data
    },
    // 市场交接
    handleMarketHandover(data, type) {
      if (!data) return
      if (data.isEnd) {
        this.$message.warning('该条数据门店建设已完结，不可操作交接')
        return
      }
      let arr = []
      if (data.shopExceptionDtos) {
        arr = data.shopExceptionDtos.filter(item => (item.exceptionType === '市场交接' && item.state === 'A'))
      }
      if (arr.length) {
        this.$message.warning('该条数据已提报交接，数据审核中，不可操作交接')
        return
      }
      this.typeFlag = type === 1 ? 'market' : 'dataTransition'
      this.showNew = false
      this.showEdit = false
      this.showDetailPage = false
      this.showMarket = true
      this.activeRowData = data
    },
    handleStop(data, flag) {
      let arr = []
      if (data.shopExceptionDtos) {
        arr = data.shopExceptionDtos.filter(item => (item.exceptionType === '终止项目' && (item.state === 'A' || item.state === 'B')))
      }
      if (arr.length) {
        this.$message.warning('该条数据已提报终止，数据审核中，不可操作终止')
        return
      }
      this.showNew = false
      this.showEdit = false
      this.showDetailPage = false
      this.showMarket = false
      this.showStopDlg = true
      this.activeRowData = data
      this.activeRowData.flag = flag
    },
    goHome() {
      this.showNew = false
      this.showEdit = false
      this.showDetailPage = false
      this.showMarket = false
      this.refreshTable()
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.refPositionTable.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

